﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增销售订单</title>
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">销售单号</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="ReportNumber" autocomplete="off" placeholder="可不填写，自动生成" lay-verify="ReportNumber" class="layui-input" id="ReportNumber">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>客户编号</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="Creator" autocomplete="off" placeholder="请输入客户编号" lay-verify="required|Creator" class="layui-input" id="Creator">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>客户名称</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="Creator" autocomplete="off" placeholder="请输入客户名称" lay-verify="required|Creator" class="layui-input" id="Creator">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>电话</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="Creator" autocomplete="off" placeholder="请输入电话" lay-verify="required|Creator" class="layui-input" id="Creator">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>销售员</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="Creator" autocomplete="off" placeholder="请输入销售员" lay-verify="required|Creator" class="layui-input" id="Creator">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>发货日期</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="CreateDate" id="CreateDate" lay-verify="required|CreateDate" placeholder="请选择发货日期" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>销售时间</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="CreateDate" id="CreateDate" lay-verify="required|CreateDate" placeholder="请选择销售时间" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="remark"></textarea>
            </div>
        </div>

        <div style="border-bottom: 1px solid black;"><h3 style="text-align:center;">产品信息</h3></div><br />
        <button type="button" class="layui-btn layui-btn-primary layui-bg-blue" id="addData">选择产品</button>
        <table id="dataTable" lay-filter="dataFilter"></table>
        <div style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
            <button class="layui-btn" lay-submit lay-filter="demo3">保存</button>
            <button class="layui-btn layui-btn-danger" onclick="cancel()">取消</button>
        </div>
    </form>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
    <script>
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var util = layui.util;
        function cancel() {
            var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
            parent.layer.close(index);//再执行关闭
        }
        layui.use(function () {
            // 日期
            laydate.render({
                elem: '#CreateDate',
                value: new Date(),
                type: 'date',
            });
            // // 供应商选择
            document.getElementById('addData').onclick = function () {
                // 弹出新窗口
                layer.open({
                    type: 2, // 弹出层类型，2表示iframe层
                    title: '选择产品',
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    scrollbar: false, // 暂时屏蔽浏览器滚动条
                    skin: 'layui-layer-rim', //加上边框
                    area: ['50%', '50%'], //宽高
                    content: '/Song/Product', // 弹出层内容，供应商选择页面地址
                    end: function () {
                        // var vendorNames = sessionStorage.getItem('vendorNameFromPopup');
                        // document.getElementById('vendorName').value = vendorNames;
                    }
                });
            };
            window.receiveData = function (data) {
                // 渲染表格
                table.render({
                    elem: '#dataTable',
                    cols: [[ //标题栏
                        // { type: 'checkbox', fixed: 'left' },
                        { field: 'productCode', title: '产品编号', fixed: 'left' },
                        { field: 'productName', title: '产品名称' },
                        { field: 'productSpecification', title: '规格' },
                        { field: 'category', title: '类别' },
                        { field: 'unit', title: '单位' },
                        { field: 'unitPrice', title: '单价' },
                        { field: 'quantity', title: '数量', edit: 'text' }, // 允许编辑数量
                        { title: '操作', templet: '#operationTpl' } // 操作列
                    ]],
                    data: data // 数据源
                });
            };
            // 监听表格工具条
            table.on('tool(dataFilter)', function (obj) {
                var data = obj.data; // 获得当前行数据
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); // 删除行
                        layer.close(index);
                    });
                }
            });

            // 表单验证
            form.verify({
                // 入库单编号
                ReportNumber: function (value) {
                    if (value.length > 20) {
                        return '报损单号不能超过20个字符';
                    }
                    // 入库单编号不能包含特殊字符
                    var reg = /[`~!#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (reg.test(value)) {
                        return '报损单号不能包含特殊字符';
                    }
                },
                // 入库单名称
                Creator: function (value) {
                    if (value.length > 20) {
                        return '制单人不能超过20个字符';
                    }
                    // 入库单名称不能包含特殊字符
                    var reg = /[`~!#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (reg.test(value)) {
                        return '制单人不能包含特殊字符';
                    }
                },
                // 入库日期 验证日期格式
                CreateDate: function (value) {
                    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
                        return '日期格式不正确，应为yyyy-mm-dd';
                    }
                },
            });

            // 添加事件
            form.on('submit(demo3)', function (data) {
                var field = data.field; // 获取表单字段值
                //判断产品信息表是否存在数据渲染
                if (table.checkStatus('dataTable').data.length == 0) {
                    layer.msg('请选择产品信息', {
                        icon: 2,
                        time: 2000
                    });
                    return false;
                }

                // 遍历产品信息表，获取产品信息
                var products = [];
                table.checkStatus('dataTable').data.forEach(function (item) {
                    var product = {
                        ProductName: item.productName,
                        ProductSpecification: item.productSpecification,
                        Category: item.category,
                        Unit: item.unit,
                        UnitPrice: item.unitPrice,
                        Quantity: item.quantity,
                        ProductNumber: item.productNumber,
                        BatchNumber: item.batchNumber,
                    }
                    products.push(product);
                });
                field.ProductName = products;// 产品信息
                field.ProductSpecification = products;
                field.Category = products;
                field.Unit = products;
                field.UnitPrice = products;
                field.Quantity = products;
                field.ProductNumber = products;
                field.BatchNumber = products;

                // 序列化表单数据
                var addDTO = {
                    ReportNumber: field.ReportNumber,
                    Creator: field.Creator,
                    CreateDate: field.CreateDate,
                    DamageType: field.DamageType,
                    Remark: field.remark,


                    ProductName: field.ProductName,
                    ProductSpecification: field.ProductSpecification,
                    Category: field.Category,
                    Unit: field.Unit,
                    UnitPrice: field.UnitPrice,
                    Quantity: field.Quantity,
                    ProductNumber: field.ProductNumber,
                    BatchNumber: field.BatchNumber,
                }
                // 此处可执行 Ajax 等操作
                $.get("/Song/CreateLossReporting", addDTO, res => {
                    if (res) {
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 2000
                        }, function () {
                            var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
                            parent.layer.close(index);//再执行关闭
                        });
                    }
                    else {
                        layer.msg('网络异常', {
                            icon: 2,
                            time: 2000
                        });
                    }
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
    <script type="text/html" id="operationTpl">
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>
</body>
</html>